<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <meta charset="UTF-8">
    <title>智慧班牌</title>
    <style>
        *
        {
            font-family: "楷体";
        }
        .nav {
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: space-around; /* 均匀分布在水平方向 */
            align-items: center; /* 垂直居中 */
        }

        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {background-color: #f1f1f1}

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body background="images/WEB.jpg"
      style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed">
<div class="nav-right">
    <div class="nav-right-name" style="color:forestgreen">
        <dl class="nav-right-signout">
            <dd align="center">智慧+的校园体验</dd>
            <dd align="right"><button onclick="window.location.href='/login'">退 出 账 号</button></dd>
        </dl>
    </div>
</div>
<div class="nav">
    <div class="dropdown" style="color: cornflowerblue">
        <span>学生签到情况</span>
        <div class="dropdown-content">
            <a href="#">上学签到签退</a>
            <a href="/TimeControl">学生签到设置</a>
        </div>
    </div>
    <div class="dropdown" style="color: cornflowerblue">
        <span>班级信息</span>
        <div class="dropdown-content">
            <a href="/ClassTable">班级课表</a>
            <a href="/Teacher">教师队伍</a>
            <a href="/Score">班级成绩</a>
        </div>
    </div>
    <div class="dropdown" style="color: cornflowerblue">
        <span>班级相册</span>
        <div class="dropdown-content">
            <a href="/Photo">上传照片</a>
        </div>
    </div>
    <div class="dropdown" style="color: cornflowerblue">
        <span>班级形象</span>
        <div class="dropdown-content">
            <a href="#">宣传标语</a>
            <a href="#">今日之星</a>
        </div>
    </div>
</div>
<h2 align="center">XX年级XX班签到情况汇总</h2>
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="signInChart"></canvas>
</div>
    <script>
        var ctx = document.getElementById('signInChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['异常', '迟到', '缺勤', '签到'],
                datasets: [{
                    label: '签到情况',
                    data: [12, 19, 3, 5], // 这里是写死的数据
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    </script>

<canvas id="lineChart" width="400" height="200" style="display: block; margin: 20px auto;"></canvas>

<script>
    var ctx = document.getElementById('lineChart').getContext('2d');
    var myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            datasets: [{
                label: '签到次数',
                data: [31, 32, 30, 29, 35, 34, 30], // 这里需要根据实际数据进行填充
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: false,
            maintainAspectRatio: true,
            title: {
                display: true,
                text: '本周学生签到情况'
            }
        }
    });
</script>
</body>
</html>
